<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template #center>
        <div>超级商场</div>
      </template>
    </nav-bar>

    <tab-control :titles="goodsTypeTitle" @tabClick="tabClick" ref="goodsTypeTab"
                 class="tab-control" v-show="isGoodsTypeTabFixed"/>

    <scroll class="content" ref="scroll"
            :probe-type="3" :pull-up-load="true"
            @scroll="contentScroll" @pullingUp="loadMore">
      <swiper-view :banners="banners" @swiperImgLoad="swiperImgLoad"/>
      <recommend-view :recommends="recommends" @recommendImgLoad="recommendImgLoad"/>
      <feature-view/>
      <tab-control :titles="goodsTypeTitle" @tabClick="tabClick" ref="insideGoodsTypeTab"/>
      <goods-list :goods="showGoods"/>
    </scroll>

    <back-top @click.native="backTopClick" v-show="showBackTop"/>
  </div>
</template>

<script>
  import SwiperView from 'views/home/childhome/SwiperView'
  import RecommendView from 'views/home/childhome/RecommendView'
  import FeatureView from 'views/home/childhome/FeatureView'

  import NavBar from 'components/common/navbar/NavBar'
  import Scroll from 'components/common/scroll/Scroll'
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodsList from 'components/content/goods/GoodsList'

  import {getHomeGoodsData, getHomeSwiperAndRecoendData} from 'network/home'
  import {scrollRefreshMixin, backTopMixin} from 'common/mixins'

  export default {
    name: "Home",
    mixins: [scrollRefreshMixin, backTopMixin],
    components: {
      SwiperView,
      RecommendView,
      FeatureView,

      NavBar,
      Scroll,
      TabControl,
      GoodsList,
    },
    data() {
      return {
        banners: [],
        recommends: [],
        goods: {
          'pop': {page: 0, list: [], title: '流行', scroll: 0},
          'new': {page: 0, list: [], title: '新品', scroll: 0},
          'sell': {page: 0, list: [], title: '精选', scroll: 0},
        },
        currentGoodsType: 'pop',
        isGoodsTypeTabFixed: false,
        swiperImgLoaded: false,
        recommendImgLoaded: false,
        deactiveScrollY: 0
      }
    },
    computed: {
      showGoods() {
        return this.goods[this.currentGoodsType].list
      },
      goodsTypeTitle() {
        return Object.values(this.goods).map(data => data.title)
      },
      goodsTypeTabOffsetTop() {
        return this.swiperImgLoaded && this.recommendImgLoaded ? this.$refs.insideGoodsTypeTab.$el.offsetTop : 0
      },
      goodsNowScroll() {
        let goodsNowScroll = this.goods[this.currentGoodsType].scroll
        return goodsNowScroll != 0 ? goodsNowScroll : (-this.goodsTypeTabOffsetTop)
      }
    },
    created() {
      this.getHomeSwiperAndRecoendData()

      // 遍历对象Key根据Key去请求数据
      for (let type in this.goods) {
        this.getHomeGoodsData(type)
      }

    },
    activated() {
      this.$refs.scroll.scrollTo(0, this.deactiveScrollY)
      this.$refs.scroll.refresh()
    },
    deactivated() {
      this.deactiveScrollY = this.$refs.scroll.getScrollY()
    },
    methods: {
      /* --- 事件监听相关 --- */
      tabClick(index) {
        this.currentGoodsType = Object.keys(this.goods)[index]

        this.$refs.insideGoodsTypeTab.currentIndex = index
        this.$refs.goodsTypeTab.currentIndex = index

        // 页面跳到商品的顶部
        this.$refs.scroll.scrollTo(0, this.goodsNowScroll, 0);
      },
      /**
       *  当滑动到指定位置时
       **/
      contentScroll(position) {
        // 判断是否需要显示返回顶部按钮
        this.listenerShowBackTop(position)

        // 判断首页商品分类标签是否吸顶
        this.isGoodsTypeTabFixed = (-position.y) > this.goodsTypeTabOffsetTop
        // 记录商品当时的位置
        if (this.isGoodsTypeTabFixed) {
          this.goods[this.currentGoodsType].scroll = position.y
        }
      },
      /**
       * 上拉加载更多
       */
      loadMore() {
        this.getHomeGoodsData(this.currentGoodsType)
        this.$refs.scroll.finishPullUp()
      },
      /**
       * 轮播图加载完成后
       */
      swiperImgLoad() {
        this.swiperImgLoaded = true
      },
      /**
       * 推荐加载完
       */
      recommendImgLoad() {
        this.recommendImgLoaded = true
      },
      /* --- 网络请求相关 --- */
      /**
       * 获取首页轮播图和推荐分类
       */
      getHomeSwiperAndRecoendData() {
        getHomeSwiperAndRecoendData()
        .then(result => {
          this.banners = result.data.banner.list
          this.recommends = result.data.recommend.list
        })
      },
      /**
       * 获取首页商品数据
       */
      getHomeGoodsData(type) {
        getHomeGoodsData(type, ++this.goods[type].page)
        .then(result => {
          this.goods[type].list.push(...result.data.list)
        })
      }
    }
  }
</script>

<style scoped>

  #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: white;
    font-weight: bold;
    font-size: 18px;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }

  .content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0px;
    right: 0px;
  }

</style>
